<template>
  <div>
    <div >
    <!--  @mouseenter="tablebig('table')" @mouseleave="tablesmall('table')" :size="size"-->
    <a-table id='table1' class="table"  style="font-size: 60px;"
             :columns="columns" :data-source="dataSource.dataSource" :rowKey="record=>record.x" :pagination="false"
             >
    <!--  :style="{height:tableHeight+'px',width:tableHeight+'px'}"-->
    </a-table>
    </div>
    <div>
      <a-card title="MAX" id="card" class="card">
        <a-card-grid style="width:50%;text-align:center">
          X
         <!-- {{ dataSource.message }}-->
        </a-card-grid>
        <a-card-grid style="width:50%;text-align:center" :hoverable="false">
         {{ dataSource.max.x }}
        </a-card-grid>
        <a-card-grid style="width:50%;text-align:center">
          Y
        </a-card-grid>
        <a-card-grid style="width:50%;text-align:center">
          {{ dataSource.max.y }}
        </a-card-grid>
      </a-card>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Table1',
  props: {
    dataSource: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      columns: [
        {
          title: '点号',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '坐标',
          children: [
            {
              title: 'X',
              align: 'center',
              dataIndex: 'x',
            },
            {
              title: 'Y',
              align: 'center',
              dataIndex: 'y',
            },
          ]
        },

      ],
    /*  data: [
        {
          x: '1',
          y: '2'
        },
        {
          x: '2',
          y: '2'
        },
        {
          x: '3',
          y: '2'
        },
        {
          x: '4',
          y: '5'
        },
        {
          x: '6',
          y: '8'
        },

      ],*/
      size:'small'
    }
  },
  methods: {
    tablebig(vaule) {
      this.size='large'
    },
    tablesmall(vaule) {
      this.size='small'
    }
  }
}
</script>

<style>
#table1 {
  width: 400px;
  height: 400px;
  float: right;
  font-size: 20px;
  transition: 0.5s;
}
#table1:hover
{
  font-size: 50px;
  font-weight: bolder;
  height:450px;
  width:600px;
}
#card {
  width: 200px;
  height: 200px;
  margin-top: 25%;
  float: right;
  font-size: 10px;
  margin-right: 1em;
}
#card:hover
{
  width: 250px;
  height: 250px;
  margin-top: 25%;
  float: right;
  font-weight: bolder;
  font-size: 20px;
  margin-right: 1em;
}
</style>
